<template>
    <nav-bar />
    <view class="scrap-page">
      <!-- 顶部导航 -->
      <view class="nav-bar">
        <text class="nav-back" @click="onBack">&#8592;</text>
        <text class="nav-title">创建报废记录</text>
      </view>
  
      <!-- 多图横向滚动 -->
      <scroll-view 
        class="scrap-img-list-horizontal" 
        scroll-x 
        :scroll-with-animation="true"
        :enhanced="true"
        :show-scrollbar="false"
        :bounces="true"
      >
        <view class="img-list-row">
          <view class="img-box-horizontal" v-for="(img, index) in form.images" :key="img.id">
            <image class="scrap-img-horizontal" :src="img.tempPath" mode="aspectFill" />
            <view class="img-delete-horizontal" @click="onImgDelete(img.id)">×</view>
          </view>
          <!-- 上传按钮 -->
          <view class="img-box-horizontal add-img-horizontal" @click="onAddImg">
            <text class="add-icon-horizontal">+</text>
          </view>
        </view>
      </scroll-view>
  
      <!-- 表单区域 -->
      <view class="form-section">
        <view class="form-item required">
          <view class="label">商品</view>
          <view class="value-row select-btn" @click="showProductSelectPopup = true">
            <text v-if="selectedProduct" class="selected-product-name">{{ selectedProduct.name }}</text>
            <text v-else class="placeholder">请选择商品</text>
            <text class="arrow">></text>
          </view>
        </view>
  
        <view class="form-item required">
          <view class="label">报废位置</view>
          <picker class="value-picker" :range="locationList" range-key="name" @change="onLocationChange">
            <view class="picker-value">{{ selectedLocation ? selectedLocation.name : '请选择' }}</view>
          </picker>
        </view>
  
        <view class="form-item required">
          <view class="label">报废数量</view>
          <view class="value-row">
            <input class="value-input" v-model="form.scrap_number" type="number" placeholder="请输入" />
            <text class="unit">个</text>
          </view>
        </view>
  
        <view class="form-item required" @click="showReasonPopup">
          <view class="label">报废原因</view>
          <view class="value-row description-preview">
            <text class="description-text">{{ form.scrap_reason || '请输入' }}</text>
            <text class="arrow">></text>
          </view>
        </view>
      </view>
  
      <!-- 报废原因弹窗 -->
      <uni-popup ref="reasonPopup" type="center">
        <view class="description-popup">
          <view class="popup-header">
            <text class="popup-title">报废原因</text>
            <text class="popup-close" @click="closeReasonPopup">×</text>
          </view>
          <view class="popup-content">
            <view class="history-section" v-if="reasonHistory.length > 0">
              <view class="history-title">历史记录</view>
              <scroll-view class="history-list" scroll-y>
                <view 
                  class="history-item" 
                  v-for="(item, index) in reasonHistory" 
                  :key="index"
                  @click="useHistoryReason(item)"
                >
                  <text class="history-text">{{ item }}</text>
                  <text class="history-delete" @click.stop="deleteHistoryReason(index)">×</text>
                </view>
              </scroll-view>
            </view>
            <textarea 
              class="description-textarea" 
              v-model="form.scrap_reason" 
              placeholder="请输入报废原因"
              :maxlength="200"
              show-confirm-bar="false"
            />
            <view class="word-count">{{ form.scrap_reason.length }}/200</view>
          </view>
          <view class="popup-footer">
            <button class="confirm-btn" @click="closeReasonPopup">确定</button>
          </view>
        </view>
      </uni-popup>
  
      <!-- 底部按钮 -->
      <view class="footer-bar">
        <button class="save-btn" @click="onSave">保存</button>
      </view>
  
      <!-- 自定义消息框组件 -->
      <message-box
        v-model="showMsgBox"
        :title="msgBoxTitle"
        :content="msgBoxContent"
        :showCancel="msgBoxShowCancel"
        :confirmText="msgBoxConfirmText"
        :cancelText="msgBoxCancelText"
        @confirm="onMsgBoxConfirm"
        @cancel="onMsgBoxCancel"
      />
  
      <!-- 自定义 Toast 组件 -->
      <toast
        v-model="showToast"
        :content="toastContent"
        :type="toastType"
        :duration="toastDuration"
      />
  
      <!-- 商品选择弹窗 -->
      <view v-if="showProductSelectPopup" class="custom-popup-mask" @click.self="closeProductSelectPopup">
        <view class="product-popup-box">
          <view class="popup-header">
            <text class="popup-title">选择商品</text>
            <text class="popup-close" @click="closeProductSelectPopup">×</text>
          </view>
          <view class="popup-content">
            <view class="product-search-bar">
              <uni-icons type="search" size="28" color="#bbb" class="search-icon" />
              <input class="product-search-input" v-model="productSearch" placeholder="搜索商品名称" />
            </view>
            <scroll-view class="product-list-scroll" scroll-y>
              <view v-for="item in filteredProductList" :key="item.id" class="product-item-big" @click="onSelectProduct(item)">
                <image v-if="item.images && item.images.length > 0" :src="IntranetConfig.domain + item.images[0].image" class="product-img" mode="aspectFill" />
                <view v-else class="product-img product-img-placeholder">
                  <uni-icons type="photo" size="48" color="#ccc" />
                </view>
                <view class="product-info-block">
                  <text class="product-name-big">{{ item.name }}</text>
                  <view class="product-stats">
                    <text class="stat">库存: {{ item.stock ?? '-' }}</text>
                    <text class="stat-divider">|</text>
                    <text class="stat">货架: {{ item.shelf_number ?? '-' }}</text>
                    <text class="stat-divider">|</text>
                    <text class="stat">仓库: {{ item.warehouse_number ?? '-' }}</text>
                  </view>
                  <view class="scrap-status-tag" :class="reportedProductIds.includes(item.product_id) ? 'reported' : 'not-reported'">
                    {{ reportedProductIds.includes(item.product_id) ? '已报废过' : '未报废' }}
                  </view>
                </view>
              </view>
              <view v-if="filteredProductList.length === 0" class="no-result">无匹配商品</view>
            </scroll-view>
          </view>
        </view>
      </view>
    </view>
    </template>
    
    <script setup>
  import { ref, onMounted, computed } from 'vue'
  import { IntranetConfig, UserConfig } from '@/static/js/config'
  import MessageBox from '@/components/message-box/message-box.vue'
  import Toast from '@/components/toast/toast.vue'
  
  // 获取用户信息
  const userInfo = computed(() => UserConfig.getUserInfo())
  
  // Toast 相关
  const showToast = ref(false)
  const toastContent = ref('')
  const toastType = ref('')
  const toastDuration = ref(2000)
  
  function showCustomToast(content, type = '', duration = 2000) {
    toastContent.value = content
    toastType.value = type
    toastDuration.value = duration
    showToast.value = true
  }
  
  // 消息框相关
  const showMsgBox = ref(false)
  const msgBoxTitle = ref('')
  const msgBoxContent = ref('')
  const msgBoxShowCancel = ref(true)
  const msgBoxConfirmText = ref('确定')
  const msgBoxCancelText = ref('取消')
  let msgBoxCallback = null
  
  function openMsgBox({ title = '', content = '', showCancel = true, confirmText = '确定', cancelText = '取消', callback = null }) {
    msgBoxTitle.value = title
    msgBoxContent.value = content
    msgBoxShowCancel.value = showCancel
    msgBoxConfirmText.value = confirmText
    msgBoxCancelText.value = cancelText
    msgBoxCallback = callback
    showMsgBox.value = true
  }
  
  function onMsgBoxConfirm() {
    if (msgBoxCallback) msgBoxCallback(true)
  }
  
  function onMsgBoxCancel() {
    if (msgBoxCallback) msgBoxCallback(false)
  }
  
  // 表单数据
  const form = ref({
    scrap_product: '',
    scrap_location: 1,
    scrap_number: '',
    scrap_reason: '',
    scrap_user: userInfo.value?.id || '',
    images: []
  })
  
  // 商品列表
  const productList = ref([])
  const selectedProduct = ref(null)
  
  // 报废位置列表
  const locationList = ref([
    { id: 1, name: '货架' },
    { id: 2, name: '仓库' }
  ])
  const selectedLocation = ref(locationList.value[0])
  
  // 原因弹窗
  const reasonPopup = ref(null)
  
  // 商品选择相关
  const showProductSelectPopup = ref(false)
  const productSearch = ref('')
  const filteredProductList = computed(() => {
    return (productList.value || []).filter(item => {
      if (!item || !item.id) return false
      return !productSearch.value || (item.name || '').toLowerCase().includes(productSearch.value.toLowerCase())
    })
  })
  
  // 已报废商品ID列表
  const reportedProductIds = ref([])
  
  // 获取商品列表
  async function getProductList() {
    try {
      const res = await uni.request({
        url: IntranetConfig.domain + 'api/product/get_product_list/',
        method: 'GET',
        header: IntranetConfig.headers
      })
      
      if (res.data.code === 200) {
        productList.value = res.data.data
      }
    } catch (error) {
      showCustomToast('获取商品列表失败', 'error')
    }
  }
  
  // 商品选择事件
  function onProductChange(e) {
    const index = e.detail.value
    selectedProduct.value = productList.value[index]
    form.value.scrap_product = selectedProduct.value.product_id
  }
  
  // 报废位置选择事件
  function onLocationChange(e) {
    const index = e.detail.value
    selectedLocation.value = locationList.value[index]
    form.value.scrap_location = selectedLocation.value.id
  }
  
  // 图片相关
  function onAddImg() {
    uni.chooseImage({
      count: 9 - form.value.images.length,
      success: (res) => {
        // 只保存临时路径，不立即上传
        form.value.images = [...form.value.images, ...res.tempFilePaths.map(path => ({
          tempPath: path,
          id: Date.now() + Math.random().toString(36).substr(2, 9) // 生成临时ID
        }))]
      }
    })
  }
  
  function onImgDelete(imageId) {
    form.value.images = form.value.images.filter(img => img.id !== imageId)
  }
  
  // 原因弹窗
  function showReasonPopup() {
    reasonPopup.value.open()
  }
  
  function closeReasonPopup() {
    // 如果原因不为空且不在历史记录中，则添加到历史记录
    if (form.value.scrap_reason && !reasonHistory.value.includes(form.value.scrap_reason)) {
      reasonHistory.value.unshift(form.value.scrap_reason)
      // 保持历史记录数量不超过最大值
      if (reasonHistory.value.length > MAX_HISTORY_COUNT) {
        reasonHistory.value.pop()
      }
      saveReasonHistory()
    }
    reasonPopup.value.close()
  }
  
  // 返回上一页
  function onBack() {
    uni.navigateBack()
  }
  
  // 检查权限
  function checkPermission() {
    if (!userInfo.value) {
      showCustomToast('请先登录', 'error')
      setTimeout(() => {
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }, 1500)
      return false
    }
  
    if (userInfo.value.is_superuser !== 1 && userInfo.value.is_superuser !== 2) {
      showCustomToast('您没有报废权限', 'error')
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
      return false
    }
  
    return true
  }
  
  // 保存报废记录
  async function onSave() {
    // 检查权限
    if (!checkPermission()) return
  
    // 表单验证
    if (!form.value.scrap_product) {
      showCustomToast('请选择商品', 'error')
      return
    }
    if (!form.value.scrap_number) {
      showCustomToast('请输入报废数量', 'error')
      return
    }
    if (!form.value.scrap_reason) {
      showCustomToast('请输入报废原因', 'error')
      return
    }
  
    // 验证报废数量
    const scrapNumber = parseInt(form.value.scrap_number)
    if (scrapNumber <= 0) {
      showCustomToast('报废数量必须大于0', 'error')
      return
    }
  
    // 验证商品库存
    const product = productList.value.find(p => p.product_id === form.value.scrap_product)
    if (product) {
      if (scrapNumber > product.stock) {
        showCustomToast('报废数量不能大于商品库存', 'error')
        return
      }
      if (form.value.scrap_location === 1 && scrapNumber > product.shelf_number) {
        showCustomToast('报废数量不能大于货架库存', 'error')
        return
      }
      if (form.value.scrap_location === 2 && scrapNumber > product.warehouse_number) {
        showCustomToast('报废数量不能大于仓库库存', 'error')
        return
      }
    }
  
    uni.showLoading({
      title: '保存中...',
      mask: true
    })
  
    try {
      // 1. 创建报废记录
      const res = await uni.request({
        url: IntranetConfig.domain + 'api/scrap/create_scrap/',
        method: 'POST',
        header: IntranetConfig.headers,
        data: form.value
      })
  
      if (res.data.code === 200) {
        const scrapId = res.data.data.scrap_id
  
        // 2. 如果有图片，上传图片
        if (form.value.images.length > 0) {
          uni.showLoading({
            title: '上传图片中...',
            mask: true
          })
  
          // 使用 Promise.all 处理所有图片上传
          const uploadPromises = form.value.images.map(image => {
            return new Promise((resolve, reject) => {
              const uploadTask = uni.uploadFile({
                url: IntranetConfig.domain + `api/scrap/upload_scrap_image/${scrapId}/`,
                filePath: image.tempPath,
                name: 'image',
                fileType: 'image',
                success: (res) => {
                  try {
                    const data = JSON.parse(res.data)
                    if (data.code === 200) {
                      resolve(data)
                    } else {
                      reject(new Error(data.msg))
                    }
                  } catch (e) {
                    reject(new Error('解析响应数据失败'))
                  }
                },
                fail: (err) => {
                  reject(new Error(err.errMsg || '上传失败'))
                }
              })
  
              // 监听上传进度
              uploadTask.onProgressUpdate((res) => {
                console.log('上传进度：', res.progress)
              })
            })
          })
  
          try {
            await Promise.all(uploadPromises)
            showCustomToast('创建成功', 'success')
          } catch (error) {
            console.error('图片上传错误：', error)
            showCustomToast('报废记录已创建，但图片上传失败', 'error', 2000)
          }
        } else {
          showCustomToast('创建成功', 'success')
        }
  
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } else {
        throw new Error(res.data.msg)
      }
    } catch (error) {
      console.error('保存报废记录错误：', error)
      showCustomToast(error.message || '创建失败', 'error')
    } finally {
      uni.hideLoading()
    }
  }
  
  // 在 script setup 部分添加以下代码
  const reasonHistory = ref([])
  const MAX_HISTORY_COUNT = 10
  
  // 使用历史原因
  function useHistoryReason(reason) {
    form.value.scrap_reason = reason
  }
  
  // 删除历史原因
  function deleteHistoryReason(index) {
    reasonHistory.value.splice(index, 1)
    saveReasonHistory()
  }
  
  // 保存历史记录到本地存储
  function saveReasonHistory() {
    uni.setStorageSync('reasonHistory', JSON.stringify(reasonHistory.value))
  }
  
  // 获取所有已报废商品ID
  async function fetchReportedProductIds() {
    try {
      const res = await uni.request({
        url: IntranetConfig.domain + 'api/scrap/get_scrap_list/',
        method: 'GET',
        header: IntranetConfig.headers
      })
      if (res.data.code === 200) {
        // 提取所有已报废的product_id
        reportedProductIds.value = res.data.data.map(item => item.scrap_product)
      }
    } catch (e) {
      // 可选：错误处理
    }
  }
  
  // 页面加载
  onMounted(() => {
    // 检查权限
    if (!checkPermission()) return
    getProductList()
    // 从本地存储加载历史记录
    const history = uni.getStorageSync('reasonHistory')
    if (history) {
      reasonHistory.value = JSON.parse(history)
    }
    fetchReportedProductIds()
  })
  
  function closeProductSelectPopup() {
    showProductSelectPopup.value = false
  }
  
  function onSelectProduct(item) {
    if (!item || !item.product_id) return
    selectedProduct.value = item
    form.value.scrap_product = item.product_id
    showProductSelectPopup.value = false
  }
    </script>
    
    <style lang="scss" scoped>
  .scrap-page {
    background: #f8f9fa;
    min-height: 100vh;
    padding-bottom: 120rpx;
    font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
    overflow-x: hidden;
    max-width: 100vw;
    box-sizing: border-box;
  }
  
  .nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx;
    height: 96rpx;
    background: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 100;
    
    .nav-back { 
      color: #333; 
      font-size: 44rpx;
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      transition: all 0.3s;
      
      &:active {
        background: rgba(0, 0, 0, 0.05);
      }
    }
    
    .nav-title { 
      flex: 1; 
      text-align: center; 
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .scrap-img-list-horizontal {
    width: 100%;
    overflow-x: auto;
    padding: 32rpx;
    background: #fff;
    margin-bottom: 24rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    max-width: 100vw;
  }
  
  .img-list-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8rpx 0;
    box-sizing: border-box;
    max-width: 100vw;
  }
  
  .img-box-horizontal {
    position: relative;
    width: 160rpx;
    height: 160rpx;
    margin-right: 24rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.98);
    }
    
    .scrap-img-horizontal {
      width: 160rpx;
      height: 160rpx;
      border-radius: 16rpx;
      object-fit: cover;
    }
    
    .img-delete-horizontal {
      position: absolute;
      top: -16rpx;
      right: -16rpx;
      width: 44rpx;
      height: 44rpx;
      background: #ff7e2d;
      color: #fff;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      font-weight: bold;
      box-shadow: 0 4rpx 12rpx rgba(255, 126, 45, 0.3);
      z-index: 2;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.9);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
  
  .add-img-horizontal {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    border: 2rpx dashed #ff7e2d;
    background: #fff6ed;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.98);
      background: darken(#fff6ed, 2%);
    }
    
    .add-icon-horizontal {
      font-size: 56rpx;
      color: #ff7e2d;
      font-weight: bold;
    }
  }
  
  .form-section {
    margin: 24rpx 32rpx;
    background: #fff;
    border-radius: 24rpx;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100vw;
    
    .form-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      border-bottom: 1rpx solid #f5f5f5;
      font-size: 30rpx;
      transition: all 0.3s;
      
      &:active {
        background: #fafafa;
      }
      
      &:last-child {
        border-bottom: none;
      }
      
      .label {
        color: #333;
        width: 180rpx;
        text-align: left;
        flex-shrink: 0;
        font-weight: 500;
      }
      
      .value-input {
        flex: 1;
        min-width: 0;
        border: none;
        background: transparent;
        font-size: 30rpx;
        color: #333;
        text-align: right;
        padding: 0;
        
        &::placeholder {
          color: #999;
        }
      }
      
      .value-picker {
        flex: 1;
        text-align: right;
        
        .picker-value {
          color: #333;
          font-size: 30rpx;
          
          &:empty::before {
            content: '请选择';
            color: #999;
          }
        }
      }
      
      .value-row {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        min-width: 0;
      }
      
      .unit {
        color: #666;
        font-size: 26rpx;
        margin-left: 8rpx;
      }
      
      .arrow {
        color: #999;
        font-size: 28rpx;
        margin-left: 8rpx;
      }
    }
    
    .form-item.required .label:after {
      content: '*';
      color: #ff7e2d;
      margin-left: 4rpx;
    }
  }
  
  .description-preview {
    .description-text {
      flex: 1;
      color: #333;
      font-size: 30rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 400rpx;
      
      &:empty::before {
        content: '请输入';
        color: #999;
      }
    }
  }
  
  .description-popup {
    width: 90vw;
    max-width: 600rpx;
    background: #fff;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
    
    .popup-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32rpx;
      border-bottom: 1rpx solid #f5f5f5;
      background: #fff;
      
      .popup-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
      }
      
      .popup-close {
        font-size: 40rpx;
        color: #999;
        padding: 16rpx;
        margin: -16rpx;
        border-radius: 50%;
        transition: all 0.3s;
        
        &:active {
          background: #f5f5f5;
        }
      }
    }
    
    .popup-content {
      padding: 32rpx;
      background: #fff;
      
      .history-section {
        margin-bottom: 24rpx;
        
        .history-title {
          font-size: 28rpx;
          color: #666;
          margin-bottom: 16rpx;
        }
        
        .history-list {
          max-height: 200rpx;
          margin-bottom: 16rpx;
          
          .history-item {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 16rpx;
            background: #f8f9fa;
            border-radius: 12rpx;
            margin-bottom: 12rpx;
            transition: all 0.3s;
            
            &:active {
              background: #f0f1f2;
            }
            
            .history-text {
              flex: 1;
              font-size: 28rpx;
              color: #333;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              margin-right: 16rpx;
            }
            
            .history-delete {
              width: 40rpx;
              height: 40rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #999;
              font-size: 32rpx;
              border-radius: 50%;
              transition: all 0.3s;
              
              &:active {
                background: rgba(0, 0, 0, 0.05);
                color: #666;
              }
            }
          }
        }
      }
      
      .description-textarea {
        width: 100%;
        height: 400rpx;
        font-size: 30rpx;
        line-height: 1.6;
        color: #333;
        padding: 24rpx;
        background: #f8f9fa;
        border-radius: 16rpx;
        border: 1rpx solid #eee;
        box-sizing: border-box;
        
        &::placeholder {
          color: #999;
        }
      }
      
      .word-count {
        text-align: right;
        font-size: 24rpx;
        color: #999;
        margin-top: 16rpx;
      }
    }
    
    .popup-footer {
      padding: 24rpx 32rpx;
      border-top: 1rpx solid #f5f5f5;
      background: #fff;
      
      .confirm-btn {
        width: 100%;
        height: 88rpx;
        background: #ff7e2d;
        color: #fff;
        border: none;
        border-radius: 12rpx;
        font-size: 32rpx;
        font-weight: 500;
        transition: all 0.3s;
        
        &:active {
          transform: scale(0.98);
          background: darken(#ff7e2d, 5%);
        }
      }
    }
  }
  
  .footer-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
    box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
    
    .save-btn {
      width: 100%;
      height: 88rpx;
      background: #ff7e2d;
      color: #fff;
      border: none;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
        background: darken(#ff7e2d, 5%);
      }
    }
  }
  
  .select-btn {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 12rpx;
    padding: 0 16rpx;
    min-height: 64rpx;
    cursor: pointer;
    font-size: 28rpx;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    
    .placeholder {
      color: #bbb;
    }
    
    .selected-product-name {
      color: #1890ff;
      font-weight: 600;
      font-size: 30rpx;
      margin-right: 4rpx;
    }
    
    .arrow {
      color: #999;
      font-size: 28rpx;
      margin-left: 8rpx;
    }
  }
  
  .custom-popup-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.25);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .product-popup-box {
    width: 650rpx;
    max-width: 90vw;
    max-height: 80vh;
    background: #fff;
    border-radius: 28rpx;
    overflow: hidden;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
    animation: popup-fade-in 0.2s;
    position: relative;
    z-index: 10000;
    display: flex;
    flex-direction: column;
  }
  
  @keyframes popup-fade-in {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;
  }
  
  .popup-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .popup-close {
    font-size: 40rpx;
    color: #999;
    padding: 16rpx;
    margin: -16rpx;
    border-radius: 50%;
    transition: all 0.3s;
    &:active {
      background: #f5f5f5;
    }
  }
  
  .popup-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 0 24rpx 0;
    background: #fff;
    min-width: 0;
    min-height: 0;
  }
  
  .product-search-bar {
    display: flex;
    align-items: center;
    background: #f4f6fa;
    border-radius: 24rpx;
    border: 2rpx solid #e6eaf0;
    padding: 0 32rpx;
    margin: 24rpx 24rpx 20rpx 24rpx;
    height: 80rpx;
    box-sizing: border-box;
    box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
  }
  
  .search-icon {
    margin-right: 18rpx;
  }
  
  .product-search-input {
    flex: 1;
    background: transparent;
    border: none;
    font-size: 32rpx;
    color: #333;
    height: 80rpx;
    line-height: 80rpx;
    outline: none;
  }
  
  .product-list-scroll {
    flex: 1;
    max-height: 52vh;
    overflow-y: auto;
    padding: 0 24rpx 0 24rpx;
  }
  
  .product-item-big {
    display: flex;
    align-items: center;
    gap: 32rpx;
    padding: 32rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    cursor: pointer;
    transition: background 0.2s;
    min-height: 120rpx;
    &:active {
      background: #f5f5f5;
    }
    .product-info-block {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      .product-name-big {
        font-size: 34rpx;
        font-weight: 600;
        color: #333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-bottom: 8rpx;
      }
      .product-stats {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #888;
        .stat {
          color: #888;
          margin-right: 4rpx;
        }
        .stat-divider {
          margin: 0 8rpx;
          color: #e0e0e0;
        }
      }
      .scrap-status-tag {
        display: inline-block;
        margin-top: 8rpx;
        padding: 4rpx 18rpx;
        border-radius: 20rpx;
        font-size: 22rpx;
        font-weight: 500;
        &.reported {
          background: #fff1f0;
          color: #ff4d4f;
          border: 1rpx solid #ffb3b3;
        }
        &.not-reported {
          background: #f6ffed;
          color: #52c41a;
          border: 1rpx solid #b7eb8f;
        }
      }
    }
  }
  
  .product-img {
    width: 96rpx;
    height: 96rpx;
    border-radius: 16rpx;
    object-fit: cover;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .product-img-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .no-result {
    text-align: center;
    color: #bbb;
    padding: 32rpx 0;
  }
    </style>    
  